<template>
  <section class="f-meal-add w-card">
    <div class="title-box">
      <span class="title-text">{{ isEdit? '编辑': '新增'}}佣金规则</span>
      <div v-if="!isEdit">
        <el-button type="primary" @click="submitHandle('add')">确定发布佣金规则</el-button>
      </div>
      <div v-else>
        <el-button @click="cancelEdit()">取消编辑</el-button>
        <el-button type="primary" @click="submitHandle('modify')">确定重新发布佣金规则</el-button>
      </div>
    </div>

    <section class="f-content">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
        <div class="f-title">基础信息</div>
        <el-row class="f-mt-20">
          <el-col :span="7">
            <el-form-item label="规则名称:" prop="strategyName">
              <el-input v-model="ruleForm.strategyName" placeholder="请输入规则名称" />
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="7">
            <el-form-item label="规则描述:" prop="description">
              <el-input v-model="ruleForm.description" placeholder="请输入规则描述" />
            </el-form-item>
          </el-col>
        </el-row>

        <div class="f-title" style="margin-top:50px">分佣比例</div>
        <el-row class="f-mt-20">
          <el-col :span="5">
            <el-form-item label="总代:" prop="totalAgentRate">
              <el-input v-model="ruleForm.totalAgentRate" placeholder="请输入总代佣金比例">
                <template #append>
                  <p style="padding:0 20px">%</p>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-form-item label="维修店直销:" prop="directSalesRate">
              <el-input v-model="ruleForm.directSalesRate" placeholder="请输入维修店直销佣金比例">
                <template #append>
                  <p style="padding:0 20px">%</p>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-form-item label="维修店间推:" prop="indirectSalesRate">
              <el-input v-model="ruleForm.indirectSalesRate" placeholder="请输入维修店间推佣金比例">
                <template #append>
                  <p style="padding:0 20px">%</p>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-form-item label="个体推广:" prop="individualPromotionRate">
              <el-input v-model="ruleForm.individualPromotionRate" placeholder="请输入个体推广佣金比例">
                <template #append>
                  <p style="padding:0 20px">%</p>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
  </section>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import api from './api.js'
import { successDeal } from '@/utils/utils.js';

export default {

  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: {}
    }
  },

  emits: ["cancelEdit", "setModify"],

  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const ruleFormRef = ref(null)

    const state = reactive({
      ruleForm: {},
      rules: {
        strategyName: [
          { required: true, message: "请输入佣金规则名称", trigger: "blur" },
        ],
        totalAgentRate: [
          { required: true, message: '请输入总代佣金比例', trigger: 'blur' }
        ],
        directSalesRate: [
          { required: true, message: '请输入维修店直销佣金比例', trigger: 'blur' }
        ],
        indirectSalesRate: [
          { required: true, message: '请输入维修店间推佣金比例', trigger: 'blur' }
        ],
        individualPromotionRate: [
          { required: true, message: '请输入个体推广佣金比例', trigger: 'blur' }
        ],
      },
    })

    onMounted(() => {
      if (props.isEdit) {
        state.ruleForm = JSON.parse(JSON.stringify(props.formData))
        state.ruleForm.totalAgentRate = state.ruleForm.totalAgentRate / 100
        state.ruleForm.directSalesRate = state.ruleForm.directSalesRate / 100
        state.ruleForm.indirectSalesRate = state.ruleForm.indirectSalesRate / 100
        state.ruleForm.individualPromotionRate = state.ruleForm.individualPromotionRate / 100
      }
    })

    function submitHandle(type) {
      ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
          let json = JSON.parse(JSON.stringify(state.ruleForm))
          json.totalAgentRate = json.totalAgentRate * 100
          json.directSalesRate = json.directSalesRate * 100
          json.indirectSalesRate = json.indirectSalesRate * 100
          json.individualPromotionRate = json.individualPromotionRate * 100

          if (type == 'add') {
            api.incomeRuleCreate(json).then(res => {
              successDeal('新增成功！')
              setTimeout(() => {
                router.go(-1)
              }, 500)
            })
          } else if (type == 'modify') {
            api.incomeRuleModify(json).then(res => {
              successDeal('编辑成功！')
              context.emit('setModify')
            })
          }
        }
      })
    }

    const cancelEdit = () => {
      context.emit('cancelEdit')
    }

    return {
      ...toRefs(state),
      ruleFormRef,
      submitHandle,
      cancelEdit
    }
  }
}
</script>

<style lang='scss' scoped>
.f-meal-add {
  box-sizing: border-box;
  padding: 20px;
  height: 100%;
  > .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    > .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-content {
    padding-left: 5px;
    .f-title {
      font-weight: bold;
      font-size: 15px;
      color: #000000;
      border-bottom: 1px solid #eaeaea;
      padding-bottom: 10px;
      .f-tips {
        color: #f73e3e;
        font-size: 12px;
        font-weight: 500;
        margin-left: 40px;
      }
    }
    .f-tabel {
      margin-top: 20px;
      border: 1px solid #acacac;
      width: 900px;
    }
    .f-guige-box {
      font-size: 14px;
      color: #404040;
      background: #eef2f4;
      display: flex;
      align-items: center;
      padding: 0 10px;
      margin-top: 20px;
      .f-ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .f-li {
          display: flex;
          align-items: center;
          padding: 16px;
        }
      }
    }
  }
}
</style>